<template>
 <el-container>
  <el-header style="height: 80px;"><the-header/></el-header>
  <el-container>
    <el-aside width="200px"><the-aside/></el-aside>
    <the-song-audio></the-song-audio>
    <el-main style="background-color: #ffffff;"><router-view :key="key" /></el-main>
    <aside-list-vue></aside-list-vue>
    <log></log>
  </el-container>
  <el-footer height = "80px"><the-footer/></el-footer>

</el-container>

</template>

<script>

import TheHeader from './TheHeader.vue'
import TheAside from './TheAside.vue'
import TheFooter from './TheFooter.vue'
import TheSongAudio from '../components/SongAudio.vue'
import AsideListVue from './AsideList.vue'
import Log from '@/views/logs/Log.vue'
export default {
  components: {
    TheHeader,
    TheAside,
    TheFooter,
    TheSongAudio,
    AsideListVue,
    Log
  },
  data() {
    return {
      collapse: false
    }
  },
  computed: {
      key() {
      // 或者 :key="$route.path" 只要保证key唯一就可以了
      return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
    }
  },
  created() {
   
  },
  mounted(){
        
      }, 


}
</script>

<style>
.el-header
 {
  position: relative;
  font-size: 22px;
  color: #ffffff;
  line-height: 80px;
  background-color: #F14F3D;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.el-footer{
  bottom: 0;
  width: 100%;
  position: absolute;
  font-size: 22px;
  color: #ffffff;
  line-height: 80px;
  background-color: #ffffff;
  
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.content-collapse {
  left: 65px;
}

.body {
  
  height: 100%;
  background-color: rgba(243, 242, 242, 0.5);
}

</style>